import 'scss/dungeon.scss'
import React from 'react'
import { totalConfig, propName } from 'config/templateConfig'
import { panelPop } from 'views/panelPop'
import Collection from 'views/map/dungeon/collection';
import Chest from 'views/map/dungeon/chest';
import Recovery from 'views/map/dungeon/recovery';
import Monster from 'views/map/dungeon/monster';

//latticeType 1.采集2.采矿3.钓鱼4.宝箱
//5.野外怪物 6.泉水(回复生命)  7.温泉(回复mp)  8.墓地(提供buff)  9.副本 
//9.事件  11.特殊建筑(解密用)
//12.神秘商人 8.分岔路

let dungeonConfig = totalConfig.dungeon
let latticeConfig = totalConfig.lattice
export default React.createClass({
    getInitialState() {
        return { data: [], latticeNode: null }
    },
    onClick(latticeId) {
        let latticeInfo = latticeConfig[latticeId];
        let latticeType = latticeInfo.latticeType;
        let opts = { latticeId: latticeId };
        if (latticeType === 1 || latticeType === 2 || latticeType === 3) {
            this.state.latticeNode = <Collection opts={opts} />
        } else if (latticeType === 4) {
            this.state.latticeNode = <Chest opts={opts} />
        } else if (latticeType === 7 || latticeType === 8 || latticeType === 9) {
            this.state.latticeNode = <Recovery opts={opts} />
        } else if (latticeType === 5) {
            this.state.latticeNode = <Monster opts={opts} />
        }
        this.setState({ latticeNode: this.state.latticeNode })
    },
    render() {
        let self = this;
        let dungeonId = this.props.params.id;
        let node, dungeonInfo = dungeonConfig[dungeonId];
        let lattices = dungeonInfo.lattices;
        node = lattices.map(function (item) {
            return <button key={item} onClick={self.onClick.bind(self, item)}>{propName[item]}</button>
        })
        return <div id='map'>
            <div className='head'>
                <div className='title'>{dungeonInfo.name}</div>
                <div className='desc'></div>
            </div>
            <div className="text-center flex wrap">
                {node}
            </div>
            <div>
                {this.state.latticeNode}
            </div>
        </div>
    }
})
